<template>
  <div class="subpage register">

    <My-head title="注册" :carthave="true"></My-head>

    <!-- 用户名 -->
    <van-form @submit="onSubmit" @failed="onFailed" ref="form">
      <van-field
        autocomplete="off"
        v-model="form.username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        left-icon="user-o"
        clearable
        :rules="[{ required: true, message: '请输入用户名' }]"
      />

      <!-- 手机号 -->
      <van-field
        autocomplete="off"
        v-model="form.phone"
        name="phone"
        label="手机号"
        placeholder="请输入手机号"
        left-icon="phone-o"
        clearable
        :rules="[
        { required: true, message: '请输入手机号' },
        { pattern: reg.phone, message: '请输入正确的手机号' }
        ]"
      />

      <!-- 密码  @blur="checkdbpass"  // 绑定失焦事件-->
      <van-field
        @blur="checkdbpass"
        autocomplete="off"
        v-model="form.password"
        :type="type"
        name="password"
        label="密码"
        left-icon="shield-o"
        :right-icon="type == 'password' ? 'closed-eye' : 'eye-o'"
        @click-right-icon="changeType"
        placeholder="请输入密码"
        clearable
        :rules="[
        { required: true, message: '请输入密码' },
        { validator: checkpass, message: '请输入6-16位数字+字母组合密码' }
        ]"
      />

      <!-- 确认密码 -->
      <van-field
        autocomplete="off"
        v-model="form.dbpassword"
        :type="type1"
        :right-icon="type1 == 'password' ? 'closed-eye' : 'eye-o'"
        @click-right-icon="changeType1"
        name="dbpassword"
        label="确认密码"
        placeholder="请输入密码确认"
        left-icon="shield-o"
        clearable
        :rules="[
        { required: true, message: '请输入密码确认' },
        { pattern: reg.pwd, message: '请输入6-16位数字字母组合密码' }, // 可写，可不写
        { validator: checkiscommon, message: '2次密码不一致' }
        ]"
      />

      <!-- 账户存在，跳转登录 -->
      <div style="margin: 16px; display: flex" class="jcsb">
        <p>
          <router-link :to="{ name: 'login' }" class="link1 mb10">已有账号,去登录?</router-link>
        </p>
      </div>

      <!-- 注册 -->
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit">注册</van-button>
      </div>

    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      type: 'password',
      type1: 'password'
    }
  },
  mounted(){
    this.getwordtest()
  },
  methods: {
    async getwordtest(){
      // this.$axios.get("http://localhost:3000/word")
      // .then(res=>{
      //   console.log(res)
      // })
      // this.$ajax.getword()
      // .then(res=>{})
      let res = await this.$ajax.getword()
    },
    onSubmit(value) {
      // 校验成功
      console.log(this.form)
      console.log(value)
    },
    checkdbpass(){
      if(this.reg.pwd.test(this.form.password)){
        this.$refs.form.validate('dbpassword')
       }
    },
    checkpass(val){
      return this.reg.pwd.test(val)
    },
    checkiscommon(val){
      if(this.reg.pwd.test(this.form.password)){
        return this.form.password == val
      }
    },
    onFailed() {
      console.log('校验失败')
      this.$toast.fail('请填写有效的注册信息!')
    },
    changeType() {
      this.type = this.type == 'password' ? 'type' : 'password'
    },
    changeType1() {
      this.type1 = this.type1 == 'password' ? 'type' : 'password'
    },
    onSubmit(value){
      console.log(this.form) // 表示校验成功
      console.log(value)

      // 先判断是否已经注册
      this.$ajax.findUser({
        phone:value.phone,
        // username:value.username
      })
      .then(res=>{
          if(res.length>0){
            this.$toast.fail("该用户已被注册,请重新注册!")
          }else{
            // 直接插入数据 
            this.$ajax.addUser(value)
            .then(result=>{
              if(result){
                this.showSuccessMsg('注册成功,将跳转到登录页面!')
                this.$router.push({ name: 'login', query: { username: value.username, phone: value.phone }})
              }
            })
          }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register {
    background-color: rgb(248, 246, 246);
    padding: 60px 20px 0 20px;
}
</style>